<template>
  <div>
    <!-- 设置标题 -->
    <Title title="实时温度曲线"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left1" style="height: 150px; margin-top: 15px"></div>
  </div>
</template>

<script>
//引入所需图表
import { Line } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";
//引入moment
import moment from "moment";

export default {
  data() {
    return {
      //实时温度数据
      tempArr: [],
    };
  },
  async mounted() {
    await this.getTempData();
    //自动初始化
    await this.initLeft1();
  },
  methods: {
    //创建图表
    initLeft1() {
      const line = new Line(this.$refs.left1, {
        data: this.tempArr,
        xField: "year",
        yField: "value",
        label: {},
        point: {
          size: 5,
          shape: "diamond",
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
        },
        tooltip: {
          showMarkers: false,
          formatter: (datum) => {
            return { name: "温度", value: datum.value + "°C" };
          },
        },
        // x轴文字样式
        xAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        // y轴文字样式
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },
    //获取实时温度
    async getTempData() {
      let tempData = await get("/dashboard/pageQueryData?page=1&pageSize=20");
      // console.log(tempData.data.list);
      this.tempArr = tempData.data.list.map((item) => {
        return {
          year: this.$options.filters.fmtDate(item.insert_time),
          value: item.temperature,
        };
      });
      // console.log(this.tempArr);
    },
  },
  // 局部注册 过滤器
  filters: {
    fmtDate(date) {
      return moment(date).format("HH:mm");
      // 或者return自己编写的时间处理函数
    },
  },
};
</script>

<style lang="less" scoped>
</style>